<template>
    <div>
        <div class="vs-table-box">
            <el-form v-loading="loading" ref="ruleForm" label-position="right" class="orm-info" label-width="140px"
                :model="ruleForm" :rules="rules">
                <div style="display: flex; flex-wrap: wrap">
                    <el-form-item label="要货单号：">
                        <el-input placeholder="系统自动生成" style="width: 200px" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型：" prop="type">
                        <el-select style="width: 200px" disabled @change="proChange" clearable v-model="ruleForm.type"
                            placeholder="请选择">
                            <el-option label="洗护用品" value="3"> </el-option>
                            <el-option label="其他" value="4"> </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="备注：">
                    <el-input v-model="ruleForm.remark" placeholder="请输入标题" style="width: 500px"
                        type="textarea"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="chooseGoods">请选择商品</el-button>
                </el-form-item>
                <el-form-item>
                    <el-table :key="1" :data="ruleForm.goods" border style="width: 100%">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="sku_text" label="规格" align="center"> </el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"> </el-table-column>
                        <el-table-column prop="trade_price" v-if="utils.getIsShopowner()" label="要货价格" align="center">
                        </el-table-column>
                        <el-table-column label="数量" align="center" width="150">
                            <template slot-scope="scope">
                                <el-input @blur="quantityBlur($event, scope.$index)"
                                    oninput="value=value.replace(/[^\d]/g,'')" v-model.number="scope.row.quantity"
                                    clearable placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" align="center" width="150">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.remark" clearable placeholder="请输入"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" width="160" label="操作" align="center">
                            <template slot-scope="scope">
                                <span @click="setRow(1, scope.row, scope.$index)" class="tab-table-text">删除</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
                <el-button @click="subitm" type="primary">提交</el-button>
            </div>
        </div>

        <choice-goods v-if="dialogTableVisible" v-model="dialogTableVisible" :type="ruleForm.type == 3 ? '4' : '5'"
            @change="changeGoods"></choice-goods>
    </div>
</template>

<script>
import ChoiceGoods from '@/components/ChoiceGoods.vue';
export default {
    components: { ChoiceGoods },
    data() {
        return {
            locaList: [],
            loading: false,
            ruleForm: {
                type: '',
                goods: [],
                remark: '',
            },
            rules: {
                type: { required: true, message: '请选择商品类型', trigger: 'change' },
            },
            shopList: [],
            dialogTableVisible: false,
            locaList: [],

            tableData: [],
        };
    },
    created() {
        let { type } = this.$route.query;
        this.ruleForm.type = type;
    },
    methods: {
        quantityBlur(e, index) {
            this.ruleForm.goods[index].quantity = parseInt(Math.abs(this.ruleForm.goods[index].quantity));
        },
        setRow(type, row, index) {
            if (type == 1) {
                // 删除
                this.ruleForm.goods.splice(index, 1);
            }
        },
        // 类型切换
        proChange() {
            this.ruleForm.goods = [];
        },
        async chooseGoods() {
            if (!this.ruleForm.type) {
                return this.$message.warning('请选择商品类型');
            }
            this.dialogTableVisible = true;
        },
        async changeGoods(val) {
            let list = [];
            for (let v of val) {
                if (!this.ruleForm.goods.find((v2) => v2.goods_id == v.id)) {
                    v.goods_id = v.id;
                    v.remark = '';
                    v.quantity = '';
                    list.push(v);
                }
            }
            this.ruleForm.goods.push(...JSON.parse(JSON.stringify(list)));
        },
        async subitm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                let flag = false;
                let goods = [];
                for (let i in this.ruleForm.goods) {
                    let item = this.ruleForm.goods[i];
                    if (item.quantity) {
                        flag = true;
                        goods.push({
                            id: item.id,
                            quantity: item.quantity,
                            price: item.trade_price,
                            remarks: item.remark,
                        });
                    }
                }
                if (!flag) {
                    return this.$message.warning('请输入商品数量');
                }
                let parms = {
                    goods: JSON.stringify(goods),
                    type: this.ruleForm.type,
                    remarks: this.ruleForm.remark,
                };
                this.loading = true;
                let { code } = await this.$Http.otherSave(parms);
                this.loading = false;
                if (code) {
                    this.$message.success('提交成功');
                    this.utils.backPage();
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>

</style>
